﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>硅谷PSS进销存系统--登录</title>
    <link href="~/CSS/login.css" rel="stylesheet" />
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div>
        <!-- Carousel -->
        <div class="layui-row">
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin" lay-anim="fade" lay-indicator="none" lay-arrow="hover" style="width: 100%;">
                    <div carousel-item="">
                        <div class="layui-this">
                            <div class="zyl_login_cont"></div>
                        </div>
                        @*<div class="">
                            <img src="~/img/carousel/01.jpg">
                        </div>*@
                        <div class="">
                            <div class="background">
                                <span></span><span></span><span></span>
                                <span></span><span></span><span></span>
                                <span></span><span></span><span></span>
                                <span></span><span></span><span></span>
                            </div>
                        </div>
                        @*<div>
                            <img style="width:100%" src="~/img/carousel/03.jpg">
                        </div>*@
                    </div>
                    <div class="layui-carousel-ind"><ul><li class=""></li><li class=""></li><li class=""></li><li class="layui-this"></li></ul></div><button class="layui-icon layui-carousel-arrow" lay-type="sub"></button><button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
                </div>
            </div>
        </div>
        <!-- Carousel End -->
        <!-- Footer -->
        <div class="layui-row">
            <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar">
                © 2021- 硅谷PSS进销存系统 || 硅谷PSS进销存系统版权所有
            </div>
        </div>
        <!-- Footer End -->
        <!-- LoginForm -->
        <div class="zyl_lofo_main">
            <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
                <legend>欢迎登陆 - 硅谷PSS进销存系统</legend>
            </fieldset>
            <div class="layui-row layui-col-space15">
                <form class="layui-form zyl_pad_01" action="https://www.17sucai.com/preview/814545/2019-07-12/Mr.Rainbow_Login/index.html">
                    <div class="layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <input type="text" name="userName" value="Admin" lay-verify="required|userName" autocomplete="off" placeholder="账号" class="layui-input">
                            <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                        </div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item">
                            <input type="password" name="pwd"  value="123" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
                            <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                        </div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                                <div class="layui-form-item">
                                    <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                                    <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                                </div>
                            </div>
                            <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                                <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md12">
                        <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login_submit">立即登录</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- LoginForm End -->
    </div>
    <script src="~/Scripts/jparticle.min.js"></script>
    <script src="~/Scripts/zylVerificationCode.js"></script>
    <script>
        layui.use(['carousel', 'form','layer'], function () {
            var carousel = layui.carousel
                , form = layui.form
                , layer = layui.layer;

            //自定义验证规则
            form.verify({
                userName: function (value) {
                    if (value.length < 3) {
                        return '账号至少得3个字符';
                    }
                }
                , pass: [/^[\S]{3,12}$/, '密码必须3到12位，且不能出现空格']
                , vercodes: function (value) {
                    //获取验证码
                    var zylVerCode = $(".zylVerCode").html();
                    if (value != zylVerCode) {
                        return '验证码错误（区分大小写）';
                    }
                }
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(login_submit)', function (data) {
                //layer.alert(JSON.stringify(data.field));
                $.post("/Manage/Login", data.field, function (data) {
                    var d = JSON.parse(data);
                    if (d.code>0) {
                        layer.msg(d.msg, {
                            icon: 6,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                                location.href = "/Manage/Index";
                        }); 
                    } else {
                        layer.msg(d.msg);
                    }
                })
                return false;
            });

            //设置轮播主体高度
            var zyl_login_height = $(window).height() / 1;
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");
         
            //Login轮播主体
            carousel.render({
                elem: '#zyllogin'//指向容器选择器
                , width: '100%' //设置容器宽度
                , height: 'zyl_car_height'
                , arrow: 'always' //始终显示箭头
                , anim: 'fade' //切换动画方式
                , autoplay: true //是否自动切换false true
                , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
                , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
                , interval: '5000' //自动切换时间:单位：ms（毫秒）
            });

            //监听轮播--案例暂未使用
            carousel.on('change(zyllogin)', function (obj) {
                var loginCarousel = obj.index;
            });

            //粒子线条
            $(".zyl_login_cont").jParticle({
                background: "rgba(0,0,0,0)",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber: 100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });

        });
    </script>
</body>
</html>
